<script setup>
import {onMounted, ref} from 'vue';
import {ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton, ElMessage} from 'element-plus';
import axios from "axios";
import {router} from "../../router/index.js";
import { useRoute } from 'vue-router';

const route = useRoute();
const form = ref({});
const editFormRef = ref(null);
//修改提交
const handleConfirm = () => {
  editFormRef.value.validate((valid) => {
    if (valid) {
      console.log('Form submitted:', form.value);
      axios.put(`/carcenter-service-personnel/staff/update`, form.value).then((res) => {
        ElMessage.success(res.data.data);
        init();
      }).catch(err => {
        console.error(err.data.message);
      })
    }else {
      ElMessage.error('请检查输入信息');
      return false;
    }
  })
};

const handleCancel = () => {
  router.go(-1);
};
const init=()=>{
  axios.get(`/carcenter-service-personnel/staff/getStaffById/${route.query.id}`).then((res) => {
    form.value = res.data.data;
  })
}
//密码
const dialogVisible = ref(false);
const passwordFormRef = ref(null);

const passwordForm = ref({
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
});
const validatePhone = (rule, value, callback) => {
  const phoneReg = /^1[3456789]\d{9}$/;
  if (!phoneReg.test(value)) {
    callback(new Error('手机号码不合法'));
  } else {
    callback();
  }
};
const editRules = {
  staffAccount: [
    { required: true, message: '员工账号不能为空', trigger: 'blur' },
  ],
  staffName: [
    { required: true, message: '员工姓名不能为空', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { validator: validatePhone, trigger: 'blur' }

  ],

};
const rules = {
  currentPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 14, message: '长度在 6 到 14 个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请再次输入新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.value.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};
//打开弹窗
const openDialog = () => {
  dialogVisible.value = true;
};
//弹窗取消
const closeDialog = () => {
  dialogVisible.value = false;
  passwordFormRef.value.resetFields();
};
//提交修改密码
const submitForm = () => {
  passwordFormRef.value.validate((valid) => {
    if (valid) {
      // 提交表单逻辑
      axios.post(`/carcenter-service-personnel/staff/modifyPassword/${route.query.id}`, passwordForm.value).then((res) => {
        if (res.data.code === 200) {
          ElMessage.success(res.data.data);
          closeDialog();
          init();
        }else {
          ElMessage.error(res.data.message);
        }
      })
    } else {
      ElMessage.error('请检查输入信息');
      return false;
    }
  });
};
onMounted(()=>{
  init();
})
</script>

<template>
  <div class="form-container">
    <h3>编辑</h3>
    <el-form :model="form" label-width="100px" :rules="editRules" ref="editFormRef">
      <el-form-item label="员工账号"  prop="staffAccount">
        <el-input v-model="form.staffAccount" placeholder="请输入员工账号"  style="width: 30%"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" >
        <el-input type="password" v-model="form.loginPassword" placeholder="请输入登录密码"  style="width: 30%" disabled ></el-input>
        <span style="color: orange; margin-left: 10px;" @click="openDialog">修改密码</span>
      </el-form-item>
      <el-form-item label="员工姓名"  prop="staffName">
        <el-input v-model="form.staffName" placeholder="请输入员工姓名"  style="width: 30%"></el-input>
      </el-form-item>
      <el-form-item label="手机号"  prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号"  style="width: 30%"></el-input>
      </el-form-item>

    </el-form>
    <div class="button-group">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确认</el-button>
    </div>
  </div>
  <!-- 修改密码弹窗 -->
  <el-dialog v-model="dialogVisible" title="修改密码" width="30%">
    <el-form :model="passwordForm" :rules="rules" ref="passwordFormRef">
      <el-form-item label="当前密码" prop="currentPassword">
        <el-input v-model="passwordForm.currentPassword" type="password" placeholder="请输入当前密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入6-14位密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.form-container {
  padding: 40px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.button-group {
  text-align: left;
  margin-top: 20px;
}
</style>